<template>
	<view class="popupSelect">
		<transition>
			<view class="box" v-if="isShow">
				<view class="header"> 材料类别及材料名称筛选 </view>
				<view class="center">
					<view class="title">
						<view class="t-item"> 材料类型 </view>
						<view class="t-item"> 材料名称 </view>
					</view>
					<view class="content">
						<view class="left">
							<checkbox-group @change="groupChange">
								<view v-for="(item,index) in deviceTypeList" :key="item.id">
									<checkbox style="transform:scale(0.8)" class="color" :value="item.id" :checked="item.isChecked" /><text @click="getCheckBoxItem(item)" class="text" :class="{active : currentIndex===item.id}">{{ item.name }}</text>
								</view>
							</checkbox-group>
						</view>
						<view class="right">
							<!-- checkbox-group @change="checkboxChange">
								<view v-for="(item,index) in deviceNameObj" :key="item.id">
									<checkbox style="transform:scale(0.8)" class="color" :value="item.id" :checked="item.isChecked" /><text class="text">{{ item.name }}</text>
								</view>
							</checkbox-group> -->
							<u-checkbox-group v-model="checkboxValue2" placement="column" @change="checkboxChange">
								<u-checkbox :customStyle="{marginBottom: '12px'}" v-for="(item,index) in deviceNameObj"
											:label="item.name" :name="item.id">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					
				</view>
				<view class="footer">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm">确定</view>
				</view>
			</view>
		</transition>
		
		<u-overlay :show="isShow" @click="cancel" :opacity="0.5"></u-overlay>
	</view>
</template>

<script>
	export default{
		props:{
			isShow:{
				type: Boolean,
				default: false,
			},
			deviceTypeList:{
				type: Array,
				default: ()=>[]
			},
		},
		data() {
			return {
				// deviceTypeList: ['钻机类','集装箱类','注浆类','其他材料',"其他材料2"],
				deviceNameObj: [],
				checkboxValue1: [],
				checkboxValue2: [],
				tempObj: {},         // 存储二级多选框选中的项
				tempList: [],        // 存储一级多选框选中的项
				tempCheck: "",
				currentIndex: null,  // 点击一级label时, 换颜色
			}
		},
		methods:{
			getCheckBoxItem(item){
				this.currentIndex = item.id
				console.log(item,'item', this.tempObj)
				this.tempCheck = item.id
				this.deviceNameObj = item.childrenList
				if(Object.keys(this.tempObj).includes(item.id + "")){
					this.checkboxValue2 = this.tempObj[item.id]
				}else{
					this.checkboxValue2 = []
				}
				console.log(this.checkboxValue2)
			},
			
			groupChange(e){
				this.checkboxValue1 = e.detail.value
				this.tempList = e.detail.value
				// this.tempObj[this.checkboxValue1] 
				// console.log(this.checkboxValue1)
			},
			checkboxChange(e){
				console.log(e,'eeeeeeeeeeee')
				this.tempObj[this.tempCheck] = e
			},
			
			// 点击取消 点击遮罩层
			cancel(){
				this.tempObj = {}
				this.checkboxValue1 = []
				this.checkboxValue2 = []
				this.deviceNameObj = []
				this.currentIndex = null
				this.$emit("cancel",false)
			},
			
			// 点击确定
			confirm(){
				this.$emit("confrim", this.tempObj, this.checkboxValue1, false)
				// this.deviceTypeList.forEach(item=>{
				// 	this.checkboxValue2.push(value=>{
				// 		if(item.id === value){
				// 			item.isChecked = true
				// 		}
				// 	})
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.popupSelect{
	.box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		background-color: #FFFFFF;
		.header{
			padding: 20rpx 0rpx;
			font-size: 32rpx;
			font-size: 600;
			text-align: center;
			border-bottom: 2rpx solid #C0C0C0;
		}
		.center{
			padding: 0rpx 20rpx;
			.title{
				display: flex;
				align-items: center;
				line-height: 80rpx;
				margin-bottom: 20rpx;
				.t-item{
					flex: 1;
					// text-align: center;
				}
			}
			.content{
				display: flex;
				.left{
					flex: 1;
				}
				.right{
					flex: 1.2;
				}
			}
			
			
		}
		.footer{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 20rpx;
			.cancel{
				flex: 1;
				background-color: #fe6a6a;
			}
			.confirm{
				flex: 1;
				background-color: #317fed;
			}
		}
	}
		
	.text{
		color: #606266;
		font-size: 15px;
		line-height: 15px;
	}
	.active{
		color: red,
	}
}
// 进入前和结束后的状态
.v-enter,.v-leave-to{
	opacity: 0;
	transform: translateY(100px);
}
// 进入和离开的动画时间段
.v-enter-active,.v-leave-active{
	transition: all 0.5s ease
}
</style>
